<template>
	<view class="footprint-container">
        <u-navbar title="浏览记录" :custom-back="handleClose" >
            <view v-if="!isMP" slot="right" class="u-p-l-20 u-p-r-20" style="color: #666666;">
              <view class="" v-if="footPrintsList && footPrintsList.length">
                <text v-if="!isEdit" class="u-m-r-15" @click="handleClearFootPrints">清空</text>
                <text v-if="!isEdit" class="u-m-r-15" @click="handleEditFootPrints">编辑</text>
                <text v-if="isEdit" @click="handleFinishedFootPrints">完成</text>
              </view>
            </view>
        </u-navbar>


        <view class="footprint-edit" v-if="footPrintsList && footPrintsList.length && isMP">
          <text v-if="!isEdit" class="u-m-r-15" @click="handleClearFootPrints">清空</text>
          <text v-if="!isEdit" class="u-m-r-15" @click="handleEditFootPrints">编辑</text>
          <text v-if="isEdit" @click="handleFinishedFootPrints">完成</text>
        </view>
        <mescroll-body ref="mescrollRef" :top="isMP ? '70' : ''" :down="down" @init="mescrollInit" @down="downCallback" @up="upCallback">
            <uni-swipe-action>
                <view v-for="(item, index) in footPrintsList" :key="index" >
                    <view class="item u-border-bottom">
                        <view class="footDate">{{ item.time | unixToDate('yyyy-MM-dd') }}</view>
                        <uni-swipe-action-item v-for="(goods, _index) in item.history" :key="_index" ref="goodslist" :show="goods.show" :auto-close="false">
                            <navigator :url="'/goods-module/goods?goods_id='+ goods.goods_id" hover-class="none" style="width: 100%;">
                                <goods-cell-search
                                    :goodsName="goods.goods_name"
                                    :goodsImg="goods.goods_img"
                                    :goodsPrice="goods.goods_price"
                                    :goodsCommentNum="-1"
                                    :goodsBuyCount="-1"
                                ></goods-cell-search>
                            </navigator>
                            <view class="good-check u-flex" slot="left" @click="handleChangeCheck(goods)">
                                <u-icon :color="goods.checked ? '#ff5000' : ''" size="38" :name="goods.checked ? 'xuanze' : 'choose'" custom-prefix="custom-icon"></u-icon>
                            </view>
                            <view class="del-sku u-flex" slot="right" @click='handleDeleteFootPrintsId(goods)'>
                                删除
                            </view>
                        </uni-swipe-action-item>
                    </view>
                </view>
            </uni-swipe-action>
        </mescroll-body>
        <view class="settlement u-flex u-row-between" v-if="isEdit">
            <view class="u-flex" @click="handleCheckAll">
                <u-icon :color="checkedAll ? '#ff5000' : ''" size="38" :name="checkedAll ? 'xuanze' : 'choose'" custom-prefix="custom-icon"></u-icon>
                <text class="u-m-l-10">全选</text>
            </view>
            <view class="">
                <view class="del-btn" @click="handleDeleteAll">删除</view>
            </view>
        </view>
        <loading-view v-if="loading"></loading-view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import * as API_Members from '@/api/members.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				footPrintsList: [],
				down: {
				    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
				},
				params: {
					page_no: 0,
					page_size: 10
				},
                isEdit: false, // 是否是编辑状态
                checkedAll: false, // 是否全选
                // #ifdef APP-NVUE || H5
                isMP: false,
                // #endif
                // #ifdef MP-WEIXIN
                isMP: true,
                // #endif
                loading: true
			};
		},
		onLoad() {
			// 页面返回刷新
			uni.$on('goodsback', () => {
			    this.downCallback()
			});
		},
		methods:{
			// 下拉刷新
			downCallback() {
				this.params.page_no = 1
				this.footPrintsList = []
				this.mescroll.resetUpScroll(true)
			},
			// 上拉加载
			upCallback(page) {
				this.params.page_no = page.num
				this.getFootprints()
			},
			// 获取我的足迹列表
			getFootprints(){
				API_Members.queryHistoryList(this.params).then(res => {
					const { data } = res
					data.forEach(key => {
						key.history.forEach(item => {
                            item.checked = false
						})
					})
                    this.loading = false
                    this.isEdit = false
					this.footPrintsList.push(...data)
					this.mescroll.endBySize(data.length, res.data_total)
				})
			},
			// 左滑删除会员足迹
			handleDeleteFootPrintsId(goods) {
				API_Members.deleteHistoryListId(goods.id).then( res => {
					this.downCallback()
				})
			},
            // 清空我的足迹
            handleClearFootPrints() {
                API_Members.clearHistoryList().then(_ => {
                    this.footPrintsList = []
                    this.downCallback()
                })
            },
            // 编辑我的足迹
            handleEditFootPrints() {
                if (this.$refs.goodslist) {
                    this.isEdit = true
                    this.footPrintsList.forEach(key => {
                        key.history.forEach(item => {
                            item.show = "left"
                        })
                    })
                }
            },
            // 编辑完成
            handleFinishedFootPrints() {
                if (this.$refs.goodslist) {
                    this.isEdit = false
                    // 重置所有选择框为未选中状态
                    this.footPrintsList.forEach(key => {
                        key.history.forEach(item => {
                            item.checked = false
                            item.show = "none"
                        })
                    })
                    this.checkedAll = false
                }
            },
            // 点击勾选/不勾选
            handleChangeCheck(goods) {
                goods.checked = !goods.checked
                // 检测是否全选
                const isCheckedAll = this.footPrintsList.every(key => {
                  return key.history.every(item => item.checked)
                })
                // 如果是全选
                this.checkedAll = isCheckedAll
            },
            // 执行全选
            handleCheckAll() {
                this.checkedAll = !this.checkedAll
                this.footPrintsList.forEach(key => {
                    key.history.forEach(item => {
                        item.checked = this.checkedAll
                    })
                })
            },
            // 删除选择
            handleDeleteAll() {
                this.footPrintsList.forEach(key => {
                    key.history.forEach(item => {
                        if(item.checked) {
							API_Members.deleteHistoryListId(item.id).then( res => {
                                // this.getFootprints()
								this.downCallback()
                            })
                        }
                    })
                })
                this.handleFinishedFootPrints()
            },
            //自定义返回按钮
            handleClose(){
                console.log('自定义返回')
                // #ifdef H5
                const pages = getCurrentPages()
                	if (pages.length > 1) {
                	uni.navigateBack(1)
                	return
                }
                //使用vue-router返回上一级
                let a = this.$router.go(-1)
                if (a == undefined) {
                	//重新定向跳转页面
                	uni.switchTab({
                	    url: '/pages/tabs/mine/mine'
                	});
                }
                return
                // #endif
                uni.navigateBack(1)
            }
		}
	}
</script>

<style lang="scss">
	.footDate {
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #f1f1f1;
		border-bottom: 1rpx solid #f1f1f1;
	}
    .good-check {
        width: 150rpx;
        justify-content: center;
        background-color: #FFFFFF;
    }
    .del-sku {
        background-color: #ff5000;
        width: 150rpx;
        color: #FFFFFF;
        font-weight: 600;
        justify-content: center;
    }
    .footprint-edit {
        background-color: #FFFFFF;
        position: fixed;
        text-align: right;
        padding-right: 20rpx;
        right: 0;
        width: 100%;
        z-index: 99;
        height: 70rpx;
        line-height: 70rpx;
    }
    .settlement {
        position: fixed;
        z-index: 99;
        bottom: 0;
        left: 0;
        margin-top: 100rpx;
        background-color: #ffffff;
        height: 100rpx;
        width: 100%;
        padding-left: 20rpx;
        .del-btn {
            color: #FFFFFF;
            font-size: 30rpx;
            padding: 0 80rpx;
            height: 100rpx;
            line-height: 100rpx;
            background-color: #ff5000;
        }
    }
</style>
